<template>
  <div class="m-leadTabFrom m-dialog">
    <el-form :model="form.data" :inline="true" :rules="form.rules" ref="changeInfo" label-width="140px" label-position="left">
      <div class="flex">
        <el-form-item label="黑名单" prop="black" style="flex: 1">
          <el-select v-model="form.data.black" placeholder="请选择" disabled>
            <el-option label="检测为黑名单" :value="2"></el-option>
            <el-option label="检测为非黑名单" :value="1"></el-option>
            <el-option label="未检测" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-button type="text" @click="testBlack">检测</el-button>
        </div>
      </div>
      <div class="flex row-towItem">
        <div>
          <el-form-item label="姓名" prop="realName">
            <el-input v-model="form.data.realName" :clearable="isEdit" :disabled="!isEdit"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="称谓" prop="title">
            <el-select v-model="form.data.title" placeholder="请选择" :clearable="isEdit" :disabled="!isEdit">
              <el-option label="先生" value="0081"></el-option>
              <el-option label="女士" value="0082"></el-option>
              <el-option label="太太" value="0083"></el-option>
              <el-option label="小姐" value="0084"></el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <div>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.data.phone" disabled></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="手机号码归属地" prop="phonePlace">
          <el-input v-model="form.data.phonePlace" disabled></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="其他手机号" prop="phonePlace">
          <el-input v-model="form.data.otherPhone" :clearable="isEdit" :disabled="!isEdit"></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="其他手机号码归属地" prop="otherPhonePlace">
          <el-input v-model="form.data.otherPhonePlace" disabled></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="模拟账号标识">
          <el-input v-model="form.data.demoTag" disabled></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="真实账号标识">
          <el-input v-model="form.data.realAccountTag" disabled></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="标记">
          <el-select v-model="showLabel" multiple placeholder="请选择" disabled>
            <el-option v-for="item in showLabel" :label="item" :value="item" :key="item"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="电邮地址" prop="email">
          <el-input v-model="form.data.email" :clearable="isEdit" :disabled="!isEdit"></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="出生日期" prop="birthdayStr" v-if="form.data.birthdayStr=='******'">
          <el-input v-model="form.data.birthdayStr" disabled></el-input>
        </el-form-item>
        <el-form-item label="出生日期" prop="birthdayStr" v-else>
          <el-date-picker
            :disabled="!isEdit"
            :editable="false"
            clearable
            v-model="form.data.birthdayStr"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="QQ" prop="qq">
          <el-input v-model="form.data.qq" :clearable="isEdit" :disabled="!isEdit"></el-input>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="WeChat" prop="wechat">
          <el-input v-model="form.data.wechat" :clearable="isEdit" :disabled="!isEdit"></el-input>
        </el-form-item>
      </div>
      <div class="flex row-towItem">
        <div>
          <el-form-item label="IP" prop="ip">
            <el-input v-model="form.data.ip" disabled></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="IP归属地" prop="ipPlace">
            <el-input v-model="form.data.ipPlace" disabled></el-input>
          </el-form-item>
        </div>
      </div>
      <div>
        <el-form-item label="分配给" prop="assigner">
          <el-select
            v-model="form.data.assigner"
            :disabled="!isEdit"
            :clearable="isEdit"
            filterable
            remote
            reserve-keyword
            :remote-method="remoteUserMethod"
            placeholder="请输入关键字"
          >
            <el-option
              v-for="item in userList"
              :label="item._id"
              :key="item._id"
              :value="item._id">
            </el-option>
          </el-select>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="LEAD状态" prop="hstatus">
          <el-select v-model="form.data.hstatus" placeholder="请选择" :clearable="isEdit" :disabled="!isEdit">
            <el-option label="新建" :value="1"></el-option>
            <el-option label="已转化" :value="3"></el-option>
            <el-option label="无效" :value="4"></el-option>
          </el-select>
        </el-form-item>
      </div>
      <div class="activeBtns" v-if="isEdit">
        <el-button plain @click="$router.go(-1)">取消</el-button>
        <el-button type="primary" @click="submit" :loading="addLoading">更新</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
  import * as LeadsAPI from '@/Api/lead';
  import * as UserAPI from '@/Api/user'
  import * as Utils from '@/utils'
  export default {
    name: 'TheLeadCommonInfo',
    data () {
      return {
        form: {
          data: {},
          rules: {
            qq: [
              {max: 15, trigger: 'blur', message: 'qq格式错误'},
            ],
            hstatus:[
              { required: true, message: '处理状态不能为空', trigger: 'blur' },
            ]
          }
        },
        userList:[],
        copyForm: null,
        addLoading:false,
        showLabel: []
      }
    },
    computed: {
      isEdit(){
        if (this.$route.query.type && this.$route.query.type == 'edit') {
          return true;
        } else {
          return false;
        }
      }
    },
    methods: {
      submit() {
        this.$refs.changeInfo.validate(flg => {
          if (!flg) {
            return;
          }
          /*
           * query.type  edit编辑模式
           * query.from  desktop 来自我的桌面
           * query.group  a 分配给我的  b 我关注的
           *
           * */
          this.addLoading = true;
          let ajaxAddress = null;
          if(this.$route.query.from == 'desktop') {
              if(this.$route.query.group == 'a') {
                ajaxAddress =  LeadsAPI.ialeadBaseEdit;
              } else  {
                ajaxAddress =  LeadsAPI.ifleadBaseEdit;
              }
          } else {
            ajaxAddress =  LeadsAPI.leadBaseEdit;
          }
          ajaxAddress(Object.assign(Utils.updateFormItemCopy(this.copyForm), this.form.data))
            .then(res => {
              this.addLoading = false;
              if (res.code != 0) {
                this.$notify.warning({
                  title: '温馨提示',
                  message: res.msg
                })
                return;
              }
              this.$message({
                type: 'success',
                message: '修改成功!'
              });
              this.queryInfo();
            })
            .catch(error => {
              this.addLoading = false;
              console.log(error)
            })
        })
      },
      testBlack() {
        LeadsAPI.leadChkBlack({
          id: this.$route.params.id.split("_")[0],
          realName: this.form.data.realName,
          phone: this.form.data.phone,
          email: this.form.data.email,
          otherPhone: this.form.data.otherPhone,
        })
          .then(res => {
            if (res.code != 0) {
              this.$notify.warning({
                title: '温馨提示',
                message: res.msg
              })
              return;
            }
            if (res.data.result) {
              this.form.data.black = 2;
            } else {
              this.form.data.black = 1;
            }
            this.$message({
              type: 'success',
              message: '检测成功:'+ (res.data.result?res.data.info:'')
            });
          })
          .catch(error => {
            console.log(error)
          })
      },
      remoteUserMethod(queryStr) {
        if (queryStr != '') {
          UserAPI.userNickname({
            input: queryStr
          })
            .then(res => {
              if (res.code != '0') {
                this.$notify({
                  title: '温馨提示',
                  message: res.msg,
                  type: 'warn'
                })
                return;
              }
              this.userList = res.data;
            })
            .catch(error => {
              console.log(error)
            })
        }

      },
      queryInfo(){
        let _arr = this.$route.params.id.split("_");
        LeadsAPI.leadLeadInfo({
          id: _arr[0],
//          phone: _arr[1],
        })
          .then(res => {
            if (res.code != 0) {
              this.$notify.warning({
                title: '温馨提示',
                message: res.msg
              })
              return;
            }
            this.form.data = res.data;
            if (res.data.labels && res.data.labels.length > 0) {
              let _arr = [];
              res.data.labels.split(',').forEach(item => {
                _arr.push(item.split('|')[1]);
              })
              this.showLabel = _arr;
            }
            this.copyForm = Object.assign({}, res.data);
          })
          .catch(error => {
            console.log(error)
          })
      }
    },
    created(){
      this.queryInfo()
    }
  }
</script>

<style scoped lang="scss">
</style>
